<template>
	<view>
		<view class="catalog">
			<scroll-view class="catalog-scroll-view" scroll-x="true" >
				<block v-for="(item,index) in catalogs" :key="item.cat_id">
				
				<view class="catalog-item" v-if="item.show_in_nav==1" :class="{active:index==currentIndex ? true:false}"  @click="changeIndex(index,item.cat_id)">{{item.cat_name}}</view>
				</block>
			</scroll-view>
			<view class="catalog-edit " @click="toCatalogEdit">
				<uni-icons type="bars" size="30" color="#C0C0C0"></uni-icons>
			</view>
		</view>
		<view class="article-list">
			
			<view class="article" v-for="item in articles" :key="item.article_id">
				<navigator :url="'../article/article?id='+item.article_id" > 
				<view class="title">
					{{item.title}}
				</view>
				<view class="bars">
					<text class="bar aticle-author">{{item.author}}</text><text class="bar article-comment">1000评论</text>
				</view>
				</navigator> 
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import {uniIcons} from '@dcloudio/uni-ui' //引入组件
	export default {
		data() {
			return {
				catalogs:[],
				currentIndex:0,
				articles:[
					
				]
			}
		},
		components:{
			
			/* 注册组件 */
			uniIcons
		},
		onLoad(){
			let that=this;//this的对象变化，通过这样进行处理
			uni.request({
				url:'http://127.0.0.1:7001/api/articlecate/getmobilearticlecates',
				//url:'https://lshop1.utools.club/api/articlecate/getmobilearticlecates',
				success(res) {
					console.log(res);
					that.$data.catalogs=res.data;
				}
			})
			uni.request({
				url:'http://127.0.0.1:7001/api/articles/open',
				//url:'https://lshop1.utools.club/api/articlecate/getmobilearticlecates',
				success(res) {
					console.log(res);
					that.$data.articles=res.data;
				}
			})
			
		}
		,
		methods: {
			changeIndex(index,cat_id){
				//console.log(index);
				let that=this;
				that.$data.currentIndex=index;
				console.log(cat_id);
				if(cat_id){
					//传值cat_id
					uni.request({
						url:'http://127.0.0.1:7001/api/articles/open?cat_id='+cat_id,
						//url:'https://lshop1.utools.club/api/articlecate/getmobilearticlecates',
						// data:{
						// 	cat_id:cat_id
						// },
						success(res) {
							console.log(res);
							that.$data.articles=res.data;
						}
					})
				}
				
			},
			toCatalogEdit(){
				/* 使用uniapp的api */
				uni.navigateTo({
					url:'../catalog-edit/catalog-edit?id=1001&name=admin'//1 传参数？id=1001
				})
			},
			// toarticle(article_id){
				
			// 	uni.navigateTo({
			// 		url:'../article/article?id='+article_id
			// 	})
				
			// }
		}
	}
</script>

<style>
	.catalog{
		height: 100rpx;
		display: flex;
	}
	.catalog-scroll-view{
		width: 90%; 
		height: 100rpx;
		white-space: nowrap;
		line-height: 100rpx;
		border-bottom: 1rpx solid #C0C0C0;
		box-sizing: border-box;
		flex: 1;
	}
	.catalog-item{
		display: inline-block;
		padding: 0 20rpx;
		font-size: 30rpx;
		
	}
	.catalog-edit{
		display: block;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
	.active{
		color: red;
	}
	.article{
		margin: 40rpx 0;
		padding: 0 40rpx;
	}
	.title{
		font-size: 36rpx;
		color: #c4bfc4;
		margin-bottom: 10rpx;
	}
	.bar{
		color: #C8C7CC;
		font-size: 22rpx;
		padding: 0 10rpx;
	}

</style>
